<template>
	<view class="content">
		<view class="order-detail-top">
			<view class="order-detail-top-left">
				<view class="order-status">
					<image src="../../../static/images/play-order-time-icon.png"></image>
					<text class="pay-status">{{ detailInfo.PlayerOrderStatusText }}</text>
				</view>
				<view>
					订单金额：
					<text>{{ (detailInfo.Fee - detailInfo.CouponAmount) | formatMoneyRmbUnit }}</text>
				</view>
			</view>
			<view class="order-detail-top-icon"><image src="../../../static/images/play-order-wallet-icon.png"></image></view>
		</view>

		<view class="container">
			<view class="order-detail-info">
				<view class="header-img" :style="{ backgroundImage: 'url( ' + detailInfo.ServeHeadImg + ' )' }"></view>
				<view class="order-detail-info-content">
					<view class="order-detail-info-item server-nick-name ">{{ detailInfo.ServeNickName }}</view>
					<view class="order-detail-info-item" @click="createPhoneCall">
						<view class="title">联系方式</view>
						<view class="order-detail-info-item-content">{{ detailInfo.ServePlayerPhone }}</view>
					</view>
					<view class="order-detail-info-item">
						<view class="title">预约门店</view>
						<view class="order-detail-info-item-content">{{ detailInfo.StoreName }}</view>
					</view>
					<view class="order-detail-info-item">
						<view class="title">预约位置</view>
						<view class="order-detail-info-item-content">{{ detailInfo.Address }}</view>
					</view>
					<view class="order-detail-info-item">
						<view class="title">预约时间</view>
						<view class="order-detail-info-item-content">{{ detailInfo.StartTime | timeFormat('yyyy-mm-dd hh:mm') }}</view>
					</view>
				</view>
			</view>

			<view class="order-price-info">
				<view class="order-price-info-item">
					<view>订单金额</view>
					<view class="order-price-content">
						<text class="unit">￥</text>
						<text class="money">{{ detailInfo.Fee | moneyFormat(2) }}</text>
					</view>
				</view>
				<view class="order-price-info-item">
					<view>优惠券</view>
					<view class="order-price-content">
						<text class="unit">￥</text>
						<text class="money">{{ detailInfo.CouponAmount | moneyFormat(2) }}</text>
					</view>
				</view>
				<view class="order-price-info-item">
					<view>实付金额</view>
					<view class="order-price-content">
						<text class="unit">￥</text>
						<text class="money">{{ (detailInfo.Fee - detailInfo.CouponAmount) | moneyFormat(2) }}</text>
					</view>
				</view>
			</view>

			<view class="order-detail-card">
				<view class="order-detail-card-item">
					<view>订单编号</view>
					<view class="order-detail-content">{{ detailInfo.OrderNo }}</view>
				</view>
				<view class="order-detail-card-item">
					<view>下单时间</view>
					<view class="order-detail-content">{{ detailInfo.CreateTime }}</view>
				</view>
				<view class="order-detail-card-item">
					<view>买家留言</view>
					<view class="order-detail-content">{{ detailInfo.Remark }}</view>
				</view>
			</view>
		</view>

		<view class="bottom-view">
			<view
				class="order-btn zhifu-btn margin-right-20"
				style="margin-left:auto"
				v-if="detailInfo.PlayerOrderStatus == 10"
				@click.stop="gopayorder(detailInfo.OrderNo, detailInfo.Fee - detailInfo.CouponAmount)"
			>
				去支付
			</view>
			<view class="order-btn zhifu-btn margin-right-20" style="margin-left:auto" v-if="detailInfo.PlayerOrderStatus == 40" v-on:tap="xudan()">续单</view>
			<view class="order-btn pinglun-btn margin-right-20" style="margin-left:auto" v-if="detailInfo.PlayerOrderStatus == 50" @click.stop="commentorder()">评价</view>
			<view class="order-btn quxiao-btn margin-right-20" v-if="detailInfo.PlayerOrderStatus == 10" @click.stop="cancelorder(detailInfo.Id, -10)">取消订单</view>
			<view
				class="order-btn tuikuan-btn margin-right-20"
				style="margin-left:auto"
				v-if="detailInfo.PlayerOrderStatus == 20 || detailInfo.PlayerOrderStatus == 30 || detailInfo.PlayerOrderStatus == -20"
				@click.stop="refundOrder(detailInfo.Id)"
			>
				申请退款
			</view>
		</view>
		<sa-popup v-show="isShowEvalauteModal" title="评价" @cancelPopup="cancelPopup" @confirmPopup="submitComment()">
			<view class="evaluate-order">
				<view class="stars">
					<!-- 	<view @click="clickStar(0)" :class="selectStarIndex >= 0 ? 'normal-star selected-star' : 'normal-star'">★</view>
					<view @click="clickStar(1)" :class="selectStarIndex >= 1 ? 'normal-star selected-star' : 'normal-star'">★</view>
					<view @click="clickStar(2)" :class="selectStarIndex >= 2 ? 'normal-star selected-star' : 'normal-star'">★</view>
					<view @click="clickStar(3)" :class="selectStarIndex >= 3 ? 'normal-star selected-star' : 'normal-star'">★</view>
					<view @click="clickStar(4)" :class="selectStarIndex >= 4 ? 'normal-star selected-star' : 'normal-star'">★</view> -->
					<sx-rate :value="commentInfo.Star" @change="clickStar" max="5" />
				</view>
				<view class="remark-container">
					<textarea maxlength="100" v-model="txt_reason" placeholder="写写你的感受吧，一不小心就成了评论高手。" class="remark"></textarea>
				</view>
			</view>
		</sa-popup>
		<saPopup title="申请退款" v-show="isShowRefundModal" @cancelPopup="cancelPopup" @confirmPopup="submitRefund()">
			<view class="evaluate-order">
				<view style="font-size: 30rpx;margin-bottom: 20rpx;">退款原因</view>
				<view class="remark-container">
					<textarea maxlength="100" v-model="txt_reason" placeholder="为了帮助我们做的更好，请提交您的退款原因" class="remark"></textarea>
				</view>
			</view>
		</saPopup>
	</view>
</template>

<script>
import { formatDate, successToShow, errorToShow } from '@/config/common.js';
import saPopup from '@/components/sa-popup.vue';
import { getAppPlayOrderDetail, updatePlayerOrderStatus, playerOrderComment, playerOrderRefund } from '@/constant/customer.js';
import SxRate from '@/components/sx-rate';
import { createPhoneCall } from '@/config/utils.js';
export default {
	components: {
		saPopup,
		SxRate
	},
	data() {
		return {
			detailInfo: {
				ServeHeadImg: ''
			},
			orderId: '',
			selectStarIndex: 0,
			isShowEvalauteModal: false,
			isShowRefundModal: false,
			commentInfo: {
				OrderId: this.orderId,
				Star: 1,
				Content: ''
			},
			refundInfo: {
				OrderId: this.orderId,
				Reason: ''
			},
			txt_reason: ''
		};
	},
	created() {},
	onLoad(options) {
		if (options.orderId) {
			this.orderId = options.orderId;
			this.getOrderDetail();
		}
	},
	methods: {
		clickStar(val) {
			this.commentInfo.Star = val;
		},
		cancelPopup() {
			this.isShowEvalauteModal = false;
			this.isShowRefundModal = false;
			this.selectStarIndex = 0;
		},
		confirmPopup() {
			this.isShowEvalauteModal = false;
			this.isShowRefundModal = false;
		},
		xudan() {
			uni.setStorageSync('playorder_serverId', this.detailInfo.ServePlayerId);
			uni.setStorageSync('playorder_headImg', this.detailInfo.ServeHeadImg);
			uni.setStorageSync('playorder_serveName', this.detailInfo.ServeNickName);
			uni.setStorageSync('playorder_serveNumber', this.detailInfo.ServePlayerNo);
			uni.setStorageSync('playorder_servehourlyWage', this.detailInfo.HourlyWage);
			uni.navigateTo({
				url: '/packagePages/player/choosetime/index?xudan=1&servePlayerId=' + this.detailInfo.ServePlayerId
			});
		},
		async getOrderDetail() {
			let result = await getAppPlayOrderDetail({ orderId: this.orderId });
			this.detailInfo = result;
			if (!this.detailInfo.Remark) {
				this.detailInfo.Remark = '';
			}
		},
		createPhoneCall() {
			createPhoneCall(this.detailInfo.ServePlayerPhone);
		},
		async gopayorder(orderNo, orderAmount) {
			//支付
			uni.navigateTo({
				url: '/pages/payorder/index?orderNo=' + orderNo + '&orderType=10' + '&orderAmount=' + orderAmount
			});
		},
		async commentorder() {
			//评价
			this.commentInfo.OrderId = this.orderId;
			this.isShowEvalauteModal = true;
			this.txt_reason = '';
		},
		async refundOrder() {
			this.refundInfo.OrderId = this.orderId;
			this.isShowRefundModal = true;
			this.txt_reason = '';
		},
		async submitComment() {
			this.commentInfo.Content = this.txt_reason;
			if (!this.commentInfo.Content) {
				errorToShow('请输入评论内容');
				return;
			}
			await playerOrderComment(this.commentInfo);
			this.isShowEvalauteModal = false;
			successToShow('评价成功', res => {
				uni.navigateBack({
					url: './list'
				});
			});
		},
		async submitRefund() {
			//申请退款
			this.refundInfo.Reason = this.txt_reason;
			if (!this.refundInfo.Reason) {
				errorToShow('请输入申请退款内容');
				return;
			}
			let result = await playerOrderRefund(this.refundInfo);
			this.isShowRefundModal = false;
			successToShow('申请退款成功', res => {
				uni.navigateBack({
					url: './list'
				});
			});
		},
		async cancelorder(orderId, orderStatus) {
			//取消订单
			let that = this;
			uni.showModal({
				title: '',
				content: '确定取消吗',
				success: function(res) {
					if (res.confirm) {
						that.confirmCancelOrder(orderId, orderStatus);
					}
				}
			});
		},
		async confirmCancelOrder(orderId, orderStatus) {
			await updatePlayerOrderStatus({
				orderId: orderId,
				playOrderStatus: orderStatus
			});
			successToShow('取消成功', res => {
				uni.navigateBack({
					url: './list'
				});
			});
		}
	}
};
</script>
<style>
@import url('@/css/common.css');
</style>

<style scoped lang="scss">
.content {
	background-color: $main-page-color;
	height: 100vh;
	overflow-y: auto;
	font-size: $main-text-size-28;
	font-family: 'SourceHanSansCN-Regular';
	color: $main-text-color-gray-33;
}

.order-detail-top {
	height: 240rpx;
	background: linear-gradient(to bottom, #ffd6b2, #f5f5f5);
	position: relative;
	padding-top: 30rpx;
	padding-left: 70rpx;

	&-left {
		font-size: $main-text-size-32;
		.order-status {
			font-family: 'SourceHanSansCN-Medium';
			color: $main-text-color-main-orange;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 16rpx;
			}
		}
	}

	&-icon {
		position: absolute;
		width: 146rpx;
		height: 126rpx;
		right: 126rpx;
		top: 16rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}

.container {
	padding: 0 30rpx;
}

.order-detail-info {
	border-radius: 16rpx;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	margin-top: -86rpx;
	min-height: 200rpx;
	position: relative;
	padding: 40rpx 30rpx;
	display: flex;
	.header-img {
		width: 160rpx;
		height: 160rpx;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		border-radius: 16rpx;
		margin-right: 20rpx;
	}

	.order-detail-info-content {
		width: calc(100% - 180rpx);

		.order-detail-info-item {
			margin-bottom: 10rpx;
			display: flex;
			.title {
				width: 140rpx;
				min-width: 140rpx;
				color: $main-text-color-gray-black;
			}
			&-content {
				width: 100%;
				word-wrap: break-word;
			}
		}
		.server-nick-name {
			font-family: 'SourceHanSansCN-Medium';
		}
	}
}

.order-detail-info-content .order-detail-info-item .title::after {
	content: '：';
}

.order-price-info {
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 10rpx 30rpx;
	margin-bottom: 20rpx;
	&-item {
		display: flex;
		padding: 30rpx 0;
		justify-content: space-between;
		border-bottom: 2rpx solid $main-line-color;
	}
}

.order-price-info-item:last-child {
	border-bottom: unset;
}

.order-price-content {
	color: $main-text-color-main-orange;
	.unit {
		font-size: $main-text-size-20;
	}
	.money {
		font-size: $main-text-size-32;
		font-family: 'SourceHanSansCN-Medium';
	}
}

.order-detail-card {
	border-radius: 16rpx;
	background-color: #ffffff;
	padding: 10rpx 30rpx;
	margin-bottom: 20rpx;

	&-item {
		display: flex;
		padding: 30rpx 0;
		justify-content: space-between;
		border-bottom: 2rpx solid $main-line-color;

		.order-detail-content {
			width: 470rpx;
			text-align: right;
		}
	}
}

.bottom-view:empty {
	display: none;
}

.order-detail-card-item:last-child {
	border-bottom: unset;
}

.stars {
	display: flex;
	margin-bottom: 10px;
}

.evaluate-order {
	padding: 20rpx;

	.remark-container {
		border: 2rpx solid #f5f6fd;
	}

	.remark {
		margin-left: 20rpx;
		margin-top: 20rpx;
		height: 180rpx;
		width: 90%;
		font-size: 28rpx;
	}
}
</style>
